<template>
	<page-meta  :page-style="!flag? 'overflow:hidden' : ''"></page-meta>
	<!-- <view> -->
	<view class="bar">
		<img class="barImg"
			src="https://tse4-mm.cn.bing.net/th/id/OIP-C.fz0zR3GDq-OqcnRjL4FchAHaEX?w=200&h=118&c=7&r=0&o=5&dpr=1.7&pid=1.7"
			alt="" />
	</view>
	<!-- 当前的古诗 -->
	<view class="poem">
		<view class="poemTitle">{{PoemInfo.poemName}}</view>
		<view class="poemName">{{PoemInfo.poemAuthor}} [{{PoemInfo.ancientDynasty}}]</view>
		<view class="poem1">{{PoemInfo.intro}}</view>
	</view>
	<!-- 按钮 -->
	<view class="but">
		<button>评论</button>
		<button>转发</button>
	</view>
	<view class="poemTranslations">
		<rich-text :nodes="AncientTranslation"></rich-text>
	</view>

	<!-- 展开阅读全文 -->
	<view class="hidden" v-show="!flag" @click="handleShow">
		<view class="">展开阅读全文</view>
	</view>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { httpPoemDetail } from '../.././API/poemApi'
	export default defineComponent({
		setup() {
			const PoemInfo = ref()
			const AncientTranslation = ref()
			const flag = ref(false)
			onLoad((opthins : any) => {
				console.log('进来了', opthins);
				getPOemFetaile(opthins)
			})
			const getPOemFetaile = (async (opthins : any) => {
				console.log("opthins11111111=====>", opthins.poemName);
				if (opthins.poemName) {
					let res : any = await httpPoemDetail(opthins.poemName)
					console.log("古诗详情======>", res);
					PoemInfo.value = res.data.data
					regexFun(res.data.data.ancientTranslation)
				}
				if (opthins.poemAuthor) {
					console.log("点击的是作者名");

				}
			})
			const regexFun = ((info) => {
				console.log("info之前===>", info);
				const regex = /<h4>(.*?)<\/h4>/g;
				const regex2 = /<p>(.*?)<\/p>/g;
				let pMatches = info.match(regex2);
				let matches = info.match(regex);
				while (matches && matches.length > 0) {
					matches.forEach((matches) => {
						const content = matches.replace(/<[^>]*>/g, ''); // 获取h4标签中的内容  
						const newContent = `<h4 style="color:#d0ae55;margin-top:20px;"><strong>${content}</strong></h4><br>`; // 修改内容样式颜色，并添加换行符  
						info = info.replace(matches, newContent); // 替换匹配到的h4标签  
					})
					matches = info.match(regex); // 继续匹配下一个h4标签  
				}
				if (pMatches && pMatches.length > 0) {
					console.log('6566666666666');
					const newpMatches = pMatches.map((item : any) => {
						const content = item.replace(/<[^>]*>/g, '')
						const newContent = `<p style="font-family: 'FangSong', sans-serif;font-size: 10px;">${content}</p>`;
						return newContent;
					})
					info = info.replace(pMatches, newpMatches)
				}

				console.log("info之后===>", info);
				AncientTranslation.value = info

			})
			// 点击zankai
			const handleShow = (()=>{
				console.log(111111111111);
				flag.value = !flag.value
				console.log(flag.value);
			})
			return {
				regexFun,
				flag,
				PoemInfo,
				AncientTranslation,
				httpPoemDetail,
				getPOemFetaile,
				handleShow
			}
		}
	})
</script>

<style lang="less">
	.bar {
		width: 100vw;

		.barImg {
			width: 100vw;
			background-color: rgb(.2, .3, .3);
			position: relative;

			&::before {
				content: '';
				position: absolute;
				/* top: 100%; */
				right: 0%;
				width: 100%;
				height: 100%;
				/* transform: translateY(0%); */
				background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .4));
			}
		}
	}

	.poem {
		display: flex;
		flex-direction: column;
		margin: 30rpx 30rpx;
		text-align: left;
		position: absolute;
		top: 10%;

		view {
			margin-bottom: 20rpx;
		}

		.poemTitle {
			font-weight: 700;
		}

		.poemName {
			color: #d0ae55;
			font-size: .8em;
		}
	}

	.poemTranslations {
		padding: 20px 20px;
	}

	.hidden {
		width: 100%;
		height: 200rpx;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		// background-color: pink;
		color: #d0ae55;
		position: absolute;
		bottom: 0%;
		// transform: translate(-25%);
		background-color: rgba(255, 255, 255, .6);

		view {}
	}
</style>